<template>
  <div>
    <div class="container"></div>
  </div>
</template>

<script lang='ts'>
import * as THREE from "three";
import { onMounted } from "vue";
import { OrbitControls } from "three/addons/controls/OrbitControls.js"; //轨道控制器

//创建场景
const scene = new THREE.Scene();
// scene.background = new THREE.Color(0x336688);

//创建渲染器
const renderer = new THREE.WebGLRenderer();

//创建相机
const camera = new THREE.PerspectiveCamera();
camera.position.z = 10;
camera.position.y = 2;

//添加网格地面
// const gridhelper = new THREE.GridHelper(10, 10);
// scene.add(gridhelper);

//添加坐标轴辅助 蓝-Z 红-X 绿-Y
const axisHelper = new THREE.AxesHelper(5);
axisHelper.position.y = 1;
scene.add(axisHelper);

//添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; //阻尼效果
controls.dampingFactor = 0.15; //阻尼系数
controls.autoRotate = true; //自动旋转
controls.autoRotateSpeed = 1.5;

//创建物体
//TODO



//运动函数
function animate() {
  requestAnimationFrame(animate);
  
  //轨道控制器更新
  controls.update();
  renderer.render(scene, camera);
}

animate();

//调整渲染器窗口大小
renderer.setSize(window.innerWidth, window.innerHeight);

//渲染场景
renderer.render(scene, camera);

onMounted(() => {
  document.querySelector(".container")!.appendChild(renderer.domElement);
});
</script>

<style scoped></style>